<template>
<!-- 首页右侧边栏 -->
    <div class="centerRight" ref="centerRight">
        <!-- 顶部多边形区域 -->
        <div class="top-box">
            <div class="polygon">
                <div class="text">
                    <i class="el-icon-s-opportunity"></i>
                    <span>10</span>
                </div>
                <svg class="tag" viewBox="0 0 120 40">
                    <polyline points="20,0 120,0 120,20 100,40 0,40 0,20 20,0"
                    style=" fill:#F56C6C; fill-opacity:0.6; stroke:#F56C6C; stroke-width:3; stroke-opacity:0.9 "/>
                </svg>
            </div>
            <div class="polygon">
                <div class="text">
                    <i class="el-icon-s-opportunity"></i>
                    <span>12</span>
                </div>
                <svg class="tag" viewBox="0 0 120 40">
                    <polyline points="20,0 120,0 120,20 100,40 0,40 0,20 20,0"
                    style=" fill:#E6A23C; fill-opacity:0.6; stroke:#E6A23C; stroke-width:3; stroke-opacity:0.9 "/>
                </svg>
            </div>
            <div class="polygon">
                <div class="text">
                    <i class="el-icon-s-opportunity"></i>
                    <span>5</span>
                </div>
                <svg class="tag" viewBox="0 0 120 40">
                    <polyline points="20,0 120,0 120,20 100,40 0,40 0,20 20,0"
                    style=" fill:#67C23A; fill-opacity:0.6; stroke:#67C23A; stroke-width:3; stroke-opacity:0.9 "/>
                </svg>
            </div>
            <div class="polygon">
                <div class="text">
                    <i class="el-icon-s-opportunity"></i>
                    <span>2</span>
                </div>
                <svg class="tag" viewBox="0 0 120 40">
                    <polyline points="20,0 120,0 120,20 100,40 0,40 0,20 20,0"
                    style=" fill:#409EFF; fill-opacity:0.6; stroke:#409EFF; stroke-width:3; stroke-opacity:0.9 "/>
                </svg>
            </div>
        </div>
        <!-- 下部区域 -->
        <div class="content-box">

            <!-- 1.设备检测区域 -->
            <!-- 标题 -->
            <div class="title">
                <div class="text-1">
                    <i class="el-icon-crop" style="margin-right:0.075rem;"></i>
                    <span>设备检测</span>
                </div>
            </div>
            <!-- 内容 -->
            <div class="content">
                <!-- 总数 -->
                <div class="dc-text">
                    <div style="height:50% ">
                        <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold">
                            总数
                        </span>
                    </div>
                    <div style="height:50%">
                        <span style="height:100%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">
                            100
                        </span>
                    </div>
                    <svg class="dc-tag" viewBox="0 0 100 70">
                        <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                        <path d="M100 0 L80 0 L100 0 L100 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M100 70 L100 50 L100 70 L80 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M0 70 L0 50 L0 70 L20 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                    </svg>
                </div>
                <!-- 使用率 -->
                <div class="dc-text">
                    <div style="height:50% ">
                        <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold">使用率</span>
                    </div>
                    <div style="height:50%">
                        <span style="height:100%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">100%</span>
                    </div>
                    <svg class="dc-tag" viewBox="0 0 100 70">
                        <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                        <path d="M100 0 L80 0 L100 0 L100 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M100 70 L100 50 L100 70 L80 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M0 70 L0 50 L0 70 L20 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                    </svg>
                </div>
                <!-- 在线率 -->
                <div class="dc-text">
                    <div style="height:50% ">
                        <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold">在线率</span>
                    </div>
                    <div style="height:50%">
                        <span style="height:100%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">90%</span>
                    </div>
                    <svg class="dc-tag" viewBox="0 0 100 70">
                        <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                        <path d="M100 0 L80 0 L100 0 L100 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M100 70 L100 50 L100 70 L80 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M0 70 L0 50 L0 70 L20 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                    </svg>
                </div>
                <!-- 故障率 -->
                <div class="dc-text">
                    <div style="height:50% ">
                        <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold">故障率</span>
                    </div>
                    <div style="height:50%">
                        <span style="height:100%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#F56C6C">10%</span>
                    </div>
                    <svg class="dc-tag" viewBox="0 0 100 70">
                        <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                        <path d="M100 0 L80 0 L100 0 L100 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M100 70 L100 50 L100 70 L80 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M0 70 L0 50 L0 70 L20 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                    </svg>
                </div> 
            </div>

            <!-- 2.智慧灯杆区域 -->
            <div class="light">
                <!-- 标题 -->
                <div class="lt-title">
                    <span style="position: absolute; left:50%; top:20%; transform: translate(-50%); font-size:0.2rem; font-weight:bold">智慧灯杆</span>
                </div>
                <!-- 内容 -->
                <div class="lt-content">
                    <div class="lt-items">  
                        <div style="height:50%">
                            <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.2rem; font-weight:normal">总数</span>
                        </div>
                        <div style="height:50%">
                            <span style="height:100%; position: relative; top:10%; text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">90</span>
                        </div>
                    </div>
                    <div class="lt-items">  
                         <div style="height:50%">
                            <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.2rem; font-weight:normal">在线率</span>
                        </div>
                        <div style="height:50%">
                            <span style="height:100%; position: relative; top:10%; text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">99%</span>
                        </div>
                    </div>
                    <div class="lt-items"> 
                         <div style="height:50%">
                            <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.2rem; font-weight:normal">亮灯率</span>
                        </div>
                        <div style="height:50%">
                            <span style="height:100%; position: relative; top:10%; text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">90%</span>
                        </div> 
                    </div>
                    <div class="lt-items"> 
                         <div style="height:50%">
                            <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.2rem; font-weight:normal">故障率</span>
                        </div>
                        <div style="height:50%">
                            <span style="height:100%; position: relative; top:10%; text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">10%</span>
                        </div> 
                    </div>
                    <div class="lt-items">  
                         <div style="height:50%">
                            <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.2rem; font-weight:normal">节能率</span>
                        </div>
                        <div style="height:50%">
                            <span style="height:100%; position: relative; top:10%; text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">68%</span>
                        </div>
                    </div>
                    <div class="lt-items">
                        <div style="height:50%">
                            <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.2rem; font-weight:normal">设备在线率</span>
                        </div>
                        <div style="height:50%">
                            <span style="height:100%; position: relative; top:10%; text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">90%</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3.智慧安防区域 -->
            <div class="title" style="margin-top:0.1rem">
            <!-- 标题 -->
            <div class="text-1">
                <i class="el-icon-crop" style="margin-right:0.075rem;"></i>
                <span>智慧安防</span>
            </div>
            </div>
            <!-- 内容 -->
            <div class="content" style="margin-top:0.1rem">
                <!-- 总数 -->
                <div class="dc-text">
                    <div style="height:50% ">
                        <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold">摄像头总数</span>
                    </div>
                    <div style="height:50%">
                        <span style="height:100%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">100</span>
                    </div>
                    <svg class="dc-tag" viewBox="0 0 100 70">
                        <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                        <path d="M100 0 L80 0 L100 0 L100 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M100 70 L100 50 L100 70 L80 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M0 70 L0 50 L0 70 L20 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                    </svg>
                </div>
                <!-- 在线数量 -->
                <div class="dc-text">
                    <div style="height:50% ">
                        <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold">在线数量</span>
                    </div>
                    <div style="height:50%">
                        <span style="height:100%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">100</span>
                    </div>
                    <svg class="dc-tag" viewBox="0 0 100 70">
                        <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                        <path d="M100 0 L80 0 L100 0 L100 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M100 70 L100 50 L100 70 L80 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M0 70 L0 50 L0 70 L20 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                    </svg>
                </div>
                <!-- 异常 -->
                <div class="dc-text">
                    <div style="height:50% ">
                        <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold">异常</span>
                    </div>
                    <div style="height:50%">
                        <span style="height:100%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#F56C6C">100</span>
                    </div>
                    <svg class="dc-tag" viewBox="0 0 100 70">
                        <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                        <path d="M100 0 L80 0 L100 0 L100 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M100 70 L100 50 L100 70 L80 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M0 70 L0 50 L0 70 L20 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                    </svg>
                </div>
                <!-- 安防事件 -->
                <div class="dc-text">
                    <div style="height:50% ">
                        <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold">安防事件</span>
                    </div>
                    <div style="height:50%">
                        <span style="height:100%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">0</span>
                    </div>
                    <svg class="dc-tag" viewBox="0 0 100 70">
                        <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                        <path d="M100 0 L80 0 L100 0 L100 20 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M100 70 L100 50 L100 70 L80 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                        <path d="M0 70 L0 50 L0 70 L20 70 Z"  
                        style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8"/>
                    </svg>
                </div> 
            </div>

            <!-- 4.智慧消防区域 -->
            <div class="light">
                <!-- 标题 -->
                <div class="li-title">
                    <span style="font-size:0.2rem;">智慧消防</span>
                </div>
                <!-- 内容 -->
                <div class="li-content">
                    <!-- 水位图 -->
                    <dv-water-level-pond :config="config" style="width:1.25rem;height:1.25rem; position: absolute; left:12%; top:50%; transform: translate(0,-50%)" />
                    <!-- 表格 -->
                    <div class="li-form">
                       <center-right-chart></center-right-chart> 
                    </div> 
                </div>
            </div>
             
            <!-- 5.能耗监测区域 -->
            <div class="title" style="margin-top:0.1rem">
                <!-- 标题 -->
                <div class="text-1">
                    <i class="el-icon-crop" style="margin-right:0.075rem;"></i>
                    <span>能耗监测</span>
                </div>
            </div>
                <!-- 内容 -->
            <div class="energy">
                <line-chart></line-chart>
            </div>
            
        </div>
    </div>
</template>

<script>
import centerRightChart from '../components/echart/chart.vue'
import lineChart from '../components/echart/lineChart.vue'

export default {
    data(){
        return{
            // 水位图数据
            config:{
                data: [55],
                shape: 'round',
                colors:['#409EFF','#409EFF'],
                waveHeight:15,
            },
        }
    },
    computed:{
        isShow(){
            return this.$store.state.clIsShow
        }
    },
    watch:{
        isShow(){
            classie.toggle( this.$refs.centerRight, 'menu-open')
        }
    },
    components:{
        centerRightChart,
        lineChart,
    },
    methods:{
        
    }
    
}
</script>

<style lang="scss" scoped>
.centerRight{
    width: 6rem;
    height: 14rem;
    position: fixed;
    right: -6.2rem;
    transition: 0.2s;
    .top-box{
        width: 100%;
        height: 0.55rem;
        display: flex;
        justify-content: space-between;
    }
    .content-box{
        position: relative;
        width: 100%;
        height: 85%;
    }

    // 多边形的边框
    .polygon{
        position: relative;
        width: 1.3rem;
        height: 0.425rem;
        .poly-line{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        // svg标签
        .tag{
            width: 100%;
            height: 100%;
        } 
    }
    // 居中
    .text{
        font-size: 0.25rem;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    // 左对齐标题 
    // 设备检测、智慧安防、能耗监测
    .text-1{
        font-size: 0.225rem;
        position: absolute;
        top:50%;
        left: 2%;
        transform: translate(0,-50%);
    }
    // 左对齐标题的渐变背景
    .title{
        position: relative;
        width: 100%;
        height: 0.35rem;
        background: -webkit-linear-gradient(left,rgba(64,158,255,0.8),rgba(64,158,255,0.1));  
    }
    // 内容盒子1
    // 设备检测、智慧安防
    .content{
        width: 100%;
        height: 1rem;
        margin-top: 0.1rem;
        display: flex;
        justify-content: space-between;
        // border: 1px solid yellowgreen;
        .dc-text{
            width: 1.4rem;
            height: 100%;
            position: relative;
            background-color: rgba(64,158,255,0.3); 
            .dc-tag{
                position: absolute;
                width: 100%;
                height: 1rem;
                left:0;
                top: 0;
            }
        }
    }

    // 智慧灯杆
    .light{
        position: relative;
        width: 100%;
        height: 2.5rem;
        margin-top: 0.1rem;
        background-color: rgba(64,158,255,0.2);
        border: 0.025rem solid rgba(64,158,255,0.6);
        box-shadow: inset 1px 1px 15px rgb(64,158,255);

        // 梯形标题区域
        .lt-title{
            position: absolute;
            height: 0.4rem;
            width: 50%;
            background-color: rgba(64,158,255,0.3);
            background: linear-gradient(45deg, transparent 0.5rem, rgba(64,158,255,0.3) 0) left,
                        linear-gradient(-45deg, transparent 0.5rem, rgba(64,158,255,0.3) 0) right;
            background-size: 50% 100%;
            background-repeat: no-repeat;
            left: 50%;
            transform: translate(-50%);
        }
        .lt-content{
            position: absolute;
            height: 2.2rem;
            width: 100%;
            top:0.6rem;
            background-color: rgba(64,158,255,0);
            display: grid;
            grid-template-columns: repeat(3,28%);
            grid-template-rows: repeat(2,33%);
            grid-row-gap: 0.2rem; //上下间距
            grid-column-gap: 0.2rem; //左右间距
            //align-content: center; //垂直居中
            justify-content: center; //格子水平居中
            .lt-items{
                background-color: rgba(64,158,255,0.1);
                box-shadow: inset 0px 0px 0.1rem rgb(64,158,255);
                border-radius: 0.075rem;
            }
        }
        // 垂直标题
        .li-title{
            position: absolute;
            width: 0.4rem;
            height: 60%;
            top: 20%;
            left: 2%;
            background-color: rgba(64,158,255,0.2);
            border: 0.0025rem solid rgba(64,158,255,0.8);
            display: flex;
            align-items: center;
            text-align: center;
        }
        .li-content{
            height: 100%;
            .li-form{
                position: absolute;
                width: 65%;
                height: 100%;
                left: 35%;
            }
        }
    }
    // 能耗检测区域
    .energy{
        position: relative;
        width: 100%;
        height: 2.8rem;
        margin-top: 0.1rem;
        background-color: rgba(64,158,255,0.2);
        border: 0.025rem solid rgba(64,158,255,0.6);
        box-shadow: inset 1px 1px 20px rgb(64,158,255);
    }
}
.centerRight.menu-open{
  right: 0.2rem;
  transition: 0.2s;
}
</style>